<!-- 用户列表 -->
<template>
  <div class="title">
    <h2>用户列表</h2>
    <el-button text @click="popupFn" style="background: skyblue;">
      添加用户
    </el-button>
    <el-dialog v-model="dialogFormVisible" title="添加用户">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-select v-model="form.gender" placeholder="男">
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
            <el-option label="保密" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.mobile" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="adduserFn">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <!-- 用户列表 -->
  <div class="list">
    <el-table :data="userlistArr" style="width: 100% ;">
      <el-table-column label="序号" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.username }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="手机号" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span>{{ scope.row.mobile }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="邮箱" align="center">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <span style="margin-left: 10px">{{ scope.row.email }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="180">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #reference>
              <el-tag :type="scope.row.gender == 1 ? 'danger' : 'success'">{{ scope.row.gender == 1 ? '男' :
                scope.row.gender == 2 ? '女' : '保密' }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="180">
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="auto">
            <template #reference>
              <el-tag :type="scope.row.status == 2 ? 'danger' : 'success'">{{ scope.row.status == 1 ? '正常' : '禁用'
              }}</el-tag>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary">修改</el-button>
          <el-button type="primary">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!-- 分页组件 -->
  <el-pagination v-model:page-size="pageSize" background layout="prev, pager, next" :total="total"
    v-model:current-page="currentPage" :default-page-size="1" @current-change="changeFn" />
</template>

<script setup>
import { ref } from 'vue'

//定义页数
const currentPage = ref(1)
//定义列表数组（当前）
const userlistArr = ref([])
//定义每页条数
const pageSize = ref(10)
//定义总数据条数
const total = ref(0)

//导入请求接口
import { getuserlistdata, adduser } from '@/utils/user.js'

let dialogFormVisible = ref(false)
const formLabelWidth = '140px'

const form = ref({
  username: '',
  password: '',
  email: '',
  gender: '',
  mobile: ''
})

//定义弹出框函数
const popupFn = () => {
  dialogFormVisible.value = true
  form.value = {}
}
//发送添加用户请求
const adduserFn = () => {

  console.log(form.value.username);
  adduser(form.value).then(res => {
    console.log(res);
    ElMessage({
      message: res.data.message,
      type: res.data.errNo == 0 ? 'success' : 'error',
      duration: 1000
    })
  })

  dialogFormVisible.value = false

}


const changeFn = () => {
  getuserlistdata({ page: currentPage.value }).then(res => {
    console.log('res', res);
    userlistArr.value = res.data.paginate.data
    pageSize.value = res.data.paginate.per_page
    total.value = res.data.paginate.total

  })
}

//初始化
changeFn()
</script>

<style lang="scss">
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px rgb(246, 246, 246) solid;
  padding: 0 30px;
  margin-top: 20px;

  h2 {
    font-size: 20px;
    font-weight: 800;
  }
}
</style>